<template>
  <div>
    <!-- 订单列表 -->
    <el-table :data="tableData" height="750" border style="width: 100%;font-size: 20px;">
      <el-table-column prop="id" label="id" width="180">
      </el-table-column>
      <el-table-column prop="name" label="商品" width="180">
      </el-table-column>
      <el-table-column prop="num" label="数量/吨" width="180">
      </el-table-column>
      <el-table-column prop="pay" label="支付/元" width="180">
      </el-table-column>
      <el-table-column prop="username" label="收货人">
      </el-table-column>
      <el-table-column prop="fa" label="发货地址">
      </el-table-column>
      <el-table-column prop="shou" label="收货地址">
      </el-table-column>
      <el-table-column prop="createTime" label="下单时间">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="num">
    </el-pagination>
  </div>
</template>

<script>
import { getOrderPage } from '../api/api'
export default {
  data() {
    return {
      tableData: '',
      num: ''
    }
  },
  mounted() {
    getOrderPage(1).then((res) => {
      // console.log(res.data.records);
      this.tableData = res.data.records
      this.num = res.data.pages * 10
    })
  },
  methods: {
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      getOrderPage(val).then((res) => {
        // console.log(res.data.records);
        this.tableData = res.data.records
      })
    }
  }
}
</script>

<style></style>